<!--忘记密码确认密码-->
<template>
	<ul class="third_input">
		<li>
			<el-input class="telnum" type="number" :maxlength="11" v-model="inputaccount" placeholder="请输入手机号(账号)..." @blur="isRegister"></el-input>
		</li>
		<li class="yanzhengma">
			<el-input class="password" type="text" v-model="code1" placeholder="输入右侧验证码..."></el-input>
			<img :src="imgSrc" alt="" @click="changeImg">
		</li>
		<li>
			<el-input class="password" type="text" v-model="code2" placeholder="短信验证码..."></el-input>
			<el-button class="getcode" :disabled="isDisabled" @click="getcode" v-text="btn_text"></el-button>
		</li>
		<li>
			<el-checkbox v-model="checked">我已阅读并接受</el-checkbox><span>注册条款</span>
		</li>
		<li>
			<el-button class="next" @click="next" @keydown.enter.tab.stop.self="next">下一步</el-button>
		</li>
	</ul>
</template>

<script>
	import {Code, isRegister} from '@/until/getData';
	import Public from '../../until/public';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				isDisabled: false,
				checked: false,			// 是否阅读条款
				inputaccount:'',		// 手机号
				code1: '',				// 图片验证码
				code2: '',				// 短信验证码
				time: 0,
				btn_text: '获取验证码',
				imgSrc: 'https://a.91jfk.com/ProvideHome/Login/vcode'				// 图片验证码
			}
		},
		methods: {
			isRegister(){
				let data = {
					tel: this.inputaccount
				}
				if (this.inputaccount.length == '11' && Public.isTel(this.inputaccount)) {
					isRegister(data).then((res) => {
						if (res.code == '1') {
							
						} else {
							this.$confirm("您"+res.msg+"，可以去登录", '消息提示', {
								confirmButtonText: '确定',
								showCancelButton: false,
								type: 'warning'
							}).then(() => {
								this.$router.push({
									name: 'accountlogin'
								})
							}).catch(() => {
										
							});
						}
					}).catch((err) => {
						console.log(err);
					})
				} else {
					this.$message({
						showClose: true,
						message: '手机号码不正确',
						type: 'warning',
						center: true,
						duration: 1500
					});
				}
			},
			next:function(){
				let data = {
					tel: this.inputaccount,
					verify: this.code2 
				}
				Public.JS_Cookie('set', 'info', data, 1);
				if (this.checked) {
					this.$router.push({
						name: 'registersuccess'
					});
				} else {
					this.$message({
						showClose: true,
						message: '请阅读注册条款并勾选',
						type: 'warning',
						center: true,
						duration: 1500
					});
				}
			},
			changeImg(){
				this.imgSrc = this.imgSrc +  '?c=' + Math.random();
			},
			getcode(){
				let _that = this;
				if (Public.isTel(this.inputaccount)) {
					if (_that.code1 == '') {
						_that.$message({
							showClose: true,
							message: '请输入图片验证码',
							type: 'warning',
							center: true,
							duration: 1500
						});
					} else {
						let data = {
							state: 1,
							tel: _that.inputaccount,
							verify: _that.code1
						}
						Code(data).then((res) => {
							console.log(res);
							if (res.code == '1') {
								_that.$message({
									showClose: true,
									message: '验证码已发送，请注意查收',
									type: 'success',
									center: true,
									duration: 1500
								});
								_that.time = 60;
								_that.timer();
							} else if(res.code == '0'){
								_that.$message({
									showClose: true,
									message: '图片验证码错误，请重新获取',
									type: 'warning',
									center: true,
									duration: 1500
								});
								_that.changeImg();
							}
						}).catch((err) => {
							console.log(err);
						})
					}
				} else {
					_that.$message({
						showClose: true,
						message: '手机号码不正确',
						type: 'warning',
						center: true,
						duration: 1500
					});
				}
			},
			timer: function () {
				if (this.time > 0) {
					this.isDisabled = true;
					this.time--;
					setTimeout(this.timer, 1000);
					this.disabled = true;
					this.btn_text = this.text();
					if (this.time == 0) {
						this.time = 0;
						this.isDisabled = false;
						clearTimeout(this.timer);
					}
				}
			},
			text: function () {
				return this.time > 0 ? this.time + 's' : '重新获取';
			}
		}
	}
</script>

<style scoped>
	ul.third_input{
		width: 334px;
		padding-top: 24px;
		margin: 0 auto;
	}
	ul.third_input li{
		padding-top: 20px;
		list-style: none;
	}
	ul.third_input li .password{
		width: 185px;
	}
	.yanzhengma img{
		width: 128px;
		height: 40px;
		margin-left: 16px;
		vertical-align: top;
	}
	ul.third_input li .getcode{
		width: 127px;
		height: 40px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		margin-left: 16px;
	}
	ul.third_input li .next{
		width: 334px;
		height: 42px;
		background: linear-gradient(to right, #7557d1, #8b63e8);
		color: white;
		font-size: 14px;
	}
	ul.third_input li:nth-child(4) span{
		color: #7b5bc7;
		font-size: 14px;
	}
</style>